<template>
    <div>
        <button @click='fn(1)'>div1</button>
        <button @click='fn(2)'>div2</button>
        <span class="box">
          <component :is="str" aaa='123'></component>
        </span>
        
        <!-- 当前 is 是哪个组件  那么 这个component就会被哪个组件整个替换 -->
    </div>
</template>
<script>
// @ is an alias to /src
import div1 from './component/div1'
import div2 from './component/div2'
export default {
    name: 'XXX',
    data() {
        return {
          str:div1
        }
    },
    methods: {
      fn(n){
        if(n==1){
          this.str = div1
        }
        else{
          this.str = div2
        }
      }
    },
    components: {
        
    }
}
</script>
<style lang="less">

</style>